<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TA库存</title>
    <!--导入layui包-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/font.css">
    <style>::-webkit-scrollbar{display: none;}</style>
</head>
<body>
<blockquote class="layui-elem-quote news_search">
    <!--数据表格-->
    <table class="layui-hide" id="taStockTable" lay-filter="taStockList"></table>

    <script type="text/html" id="taStock_search">
        <!--多条件查询层-->
        <div style="float: left">
            <form class="layui-form layui-col-md12 x-so">
                统计日期：
                <div class="layui-input-inline">
                    <input type="date" name="dates" id="dates" placeholder="请输入统计日期" autocomplete="off" class="layui-input"/>
                </div>
                <button id="search" class="layui-btn  layui-btn-primary layui-bg-gray" lay-submit data-type="reload" lay-filter="provinceSearch">
                    <i class="layui-icon">&#xe615;</i>
                </button>
            </form>
        </div>
        <!--多条件查询结束-->

        <!--头部工具栏-->
        <div class="layui-btn-container layui-input-inline" style="margin-left: 50px">
            <button class="layui-btn layui-btn-danger" lay-event="batchDel">
                <i class="layui-icon">&#xe640;</i>批量删除
            </button>
            <button class="layui-btn layui-btn-normal" lay-event="add" style="display: none">
                <i class="layui-icon">&#xe654;</i>添加数据
            </button>
        </div>
    </script>

    <!-- 添加/修改界面开始 -->
    <div id="data-main" style="display: none;">
        <div style="margin-left: 180px;">
            <form class="layui-form" id="taStockForm" method="post" lay-skin="line" lay-filter="taStockFormTest" >
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width: 250px;right: 170px;">TA库存编号</label>
                    <div class="layui-input-inline" style="right: 170px;">
                        <input name="tatId" lay-verify="required" placeholder="请输入TA库存编号" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">基金名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fundId" lay-verify="required" placeholder="请输入基金名称" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">TA数量</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tatNum" lay-verify="required" placeholder="请输入TA数量" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">TA金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="tatMoney" lay-verify="required" placeholder="请输入TA金额" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">统计日期</label>
                    <div class="layui-input-inline">
                        <input type="date" name="dates" lay-verify="required" placeholder="请输入统计日期" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline">
                        <input type="text" name="notes" placeholder="请输入备注" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-bg-blue" lay-submit lay-filter="formSave">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 添加/修改界面结束 -->

    <!-- 行中操作按钮[仅对本行操作] -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="delete">删除</a>
    </script>

    <!--脚本代码-->
    <script type="text/javascript">
        layui.use(['table','layer','form','laypage','util','jquery'],function () {
            //导入模块并得到模块对象
            var table = layui.table,//表格对象
                layer = layui.layer,//弹层对象
                form = layui.form,//表单对象
                laypage = layui.laypage,//分页组件
                $ = layui.jquery,//jquery对象
                util = layui.util;//工具对象
            //渲染表格对象
            table.render({
                //id:"houseReload",//为多条件搜索重新加载使用
                elem: "#taStockTable",//表格对象
                url: "/taStockcrud/taStock",//后台服务路径
                method: "get",//提交方式
                height:740,
                toolbar: "#taStock_search",//表格上方普通工具栏
                //一页显示5条数据
                limit: 15,
                cols: [
                    [
                        {checkbox: true},//开启多选框
                        {field: "tatId", title: "TA库存编号", align: "center"},
                        {field: "fundName", title: "基金名称", align: "center"},
                        {field: "tatNum", title: "TA数量(份额)", align: "center",templet:function (d) {
                                if (d.tatNum.toString().indexOf(".")!=-1){
                                    return d.tatNum.toLocaleString();
                                }else{
                                    return (d.tatNum+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
                                }
                            }},
                        {field: "tatMoney", title: "TA单位净值(元)", align: "center"},
                        {field: "dates", title: "业务日期", align: "center"},
                        {field: "notes", title: "备注", align: "center"},
                        {fixed:"right",title:"操作",width:160,align:"center",toolbar:"#barDemo"}
                    ]
                ],
                page: true,
                //一页选择显示5或10条数据
                limits: [5, 10,20,30,50]
            });

            //监听添加或修改的提交操作
            //定义请求方式
            var method="";
            form.on('submit(formSave)',function (data) {
                //ajax提交数据
                $.ajax({
                    type:method,//提交方式
                    url:"/taStockcrud/taStock",//后台控制器路径
                    data:JSON.stringify(data.field),
                    dataType:"text",
                    contentType:"application/json;charset=utf-8",
                    success:function (msg) {
                        layer.closeAll();
                        layer.msg(msg);
                        table.reload("taStockTable");
                    }
                });
                return false;
            });
            
            //表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
            table.on('toolbar(taStockList)', function(obj) {
                //检查表格选择操作状态
                var checkStatus = table.checkStatus(obj.config.id);
                //判断事件event值
                switch(obj.event) {
                    //批量删除操作：删除选定的多行数据
                    case "batchDel":
                        //获得选中的表格行
                        var data = checkStatus.data;
                        //判断是否大于0行
                        if(data.length>0){
                            layer.confirm('请确认是否真的删除?', function(index){
                                //获取所有选择的id
                                var tatIdStr="";

                                for (var i = 0; i < data.length; i++) {
                                    tatIdStr = tatIdStr+data[i].tatId+",";//累加字符
                                }
                                //去掉最后多余的逗号
                                tatIdStr=tatIdStr.substring(0,tatIdStr.length-1);
                                layer.close(index);
                                //使用ajax删除选中的
                                $.ajax({
                                    type: "delete",//请求方式为put,来替代delete
                                    url: "/taStockcrud/taStock/"+tatIdStr,//后台Servlet路径
                                    success: function(msg){
                                        layer.msg('删除成功');
                                        //重新加载表格数据
                                        table.reload('taStockTable');
                                    }
                                });
                            });
                        }else{
                            //没有选择数据行
                            layer.msg('你至少选一行！');
                        }
                        break;
                    case 'add':
                        //请求方式为post
                        method="post";
                        //清空表单
                        $("#taStockForm")[0].reset();
                        layer.open({
                            type:1,//外部页面为2，内部层1
                            title:"<span style='color:white' align='center'><i class='layui-icon'>&#xe61f;</i>添加TA库存</span>",
                            area:["50%","65%"],
                            shade:0.4,
                            skin: 'layui-layer-lan',
                            content:$("#data-main").html()
                        });
                        //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                        $("input[name='tatId']").prop("readonly",false);
                        break;
                }
            });
            
            //监听表格行工具(操作)事件 [不能和前面写在一起，原因二者参数有区别：前者toolbar，这里为tool]
            table.on("tool(taStockList)",function (obj) {
                //得到表格行数据
                var data=obj.data;
                //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,
                // 此处使用if梯形结构)
                if(obj.event == "delete"){//判断是否为行删除操作
                    layer.confirm("真的删除Ta库存编号为"+data.tatId+"这行数据吗?", function(index){
                        //执行表格中删除操作
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            type: "delete",
                            url: "/taStockcrud/taStock/"+data.tatId,//后台Servlet路径
                            success: function(msg){
                                //重新加载表格数据
                                table.reload('taStockTable');
                                layer.msg(msg);
                            }
                        });
                    });
                }
            });

            //多条件搜索
            //搜索表单中提交按钮的事件代码
            form.on("submit(provinceSearch)",function (data) {
                //定义表单数据对象
                var formData=data.field;
                //得到表单数据json字符串
                var json=JSON.stringify(data.field);
                //alert(json);
                //重新加载表格对象
                table.reload("taStockTable",{
                    //页码
                    page:{
                        curr:1
                    },
                    //条件数据，会带到后台
                    where:{
                        dates:formData.dates
                    }
                });
                return false;
            });
        });
    </script>
    </blockquote>
</body>
</html>